<template>
  <div class="voice-selector">
    <h3 class="section-title">角色配音</h3>
    <a-button 
      type="link" 
      class="add-role-btn"
      @click="addRole"
    >
      <Plus :size="16" />
      添加角色
    </a-button>
    
    <div class="roles-container">
      <div 
        v-for="(role, index) in roles" 
        :key="role.id"
        class="role-card"
      >
        <div class="role-header">
          <div class="role-info">
            <a-input
              v-model:value="role.name"
              placeholder="角色名称"
              class="role-name-input"
              @blur="updateRole(index, 'name', role.name)"
            />
            <span class="role-label">主要角色</span>
          </div>
          <a-button 
            v-if="roles.length > 1"
            type="text" 
            danger 
            size="small"
            @click="removeRole(index)"
            class="remove-role-btn"
          >
            <X :size="14" />
          </a-button>
        </div>
        
        <div class="voice-options">
          <a-select
            v-model:value="role.voiceType"
            placeholder="选择语音类型"
            class="voice-select"
            @change="(value: string) => updateRole(index, 'voiceType', value)"
          >
            <a-select-option value="温柔女声">温柔女声</a-select-option>
            <a-select-option value="少年音色">少年音色</a-select-option>
            <a-select-option value="成熟女声">成熟女声</a-select-option>
            <a-select-option value="磁性男声">磁性男声</a-select-option>
            <a-select-option value="活泼女声">活泼女声</a-select-option>
            <a-select-option value="沉稳男声">沉稳男声</a-select-option>
          </a-select>
          
          <TTSPlayButton
            :message="getVoicePreviewText(role)"
            :voice="role.voiceType"
            size="small"
            type="primary"
            custom-class="play-btn"
            :show-text="false"
            :enable-mock-data="true"
            @start="role.isPlaying = true"
            @completed="role.isPlaying = false"
            @stopped="role.isPlaying = false"
            @error="role.isPlaying = false"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Plus, X } from 'lucide-vue-next'
import { message } from 'ant-design-vue'
import TTSPlayButton from '@/components/Common/TTSPlayButton.vue'

interface Role {
  id: string
  name: string
  voiceType: string
  isPlaying: boolean
}

interface Emits {
  rolesChanged: [roles: Role[]]
}

const emit = defineEmits<Emits>()

const roles = reactive<Role[]>([
  {
    id: '1',
    name: '林黛玉',
    voiceType: '温柔女声',
    isPlaying: false
  },
  {
    id: '2', 
    name: '贾宝玉',
    voiceType: '少年音色',
    isPlaying: false
  },
  {
    id: '3',
    name: '王熙凤',
    voiceType: '成熟女声',
    isPlaying: false
  }
])

const addRole = () => {
  const newRole: Role = {
    id: Date.now().toString(),
    name: `角色${roles.length + 1}`,
    voiceType: '',
    isPlaying: false
  }
  roles.push(newRole)
  emit('rolesChanged', [...roles])
}

const removeRole = (index: number) => {
  if (roles.length > 1) {
    roles.splice(index, 1)
    emit('rolesChanged', [...roles])
  }
}

const updateRole = (index: number, field: keyof Role, value: any) => {
  if (roles[index]) {
    (roles[index] as any)[field] = value
    emit('rolesChanged', [...roles])
  }
}

const getVoicePreviewText = (role: Role) => {
  return `你好，我是${role.name}，这是${role.voiceType}的语音预览。`
}

// 初始化时触发事件
emit('rolesChanged', [...roles])
</script>

<style scoped>
.voice-selector {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-role-btn {
  color: #6366f1 !important;
  padding: 4px 8px !important;
  height: auto !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.add-role-btn:hover {
  background: rgba(99, 102, 241, 0.1) !important;
}

.roles-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.role-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
  transition: all 0.2s ease;
}

.role-card:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.02);
}

.role-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.role-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.role-name-input {
  max-width: 120px;
  font-weight: 500;
}

.role-label {
  font-size: 12px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.remove-role-btn {
  color: #ff4d4f !important;
  padding: 4px !important;
}

.remove-role-btn:hover {
  background: rgba(255, 77, 79, 0.1) !important;
}

.voice-options {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-select {
  flex: 1;
  max-width: 200px;
}

.play-btn {
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

.play-btn:hover {
  transform: scale(1.05);
}

/* TTSPlayButton 样式覆盖 */
:deep(.play-btn) {
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
}

:deep(.play-btn:hover) {
  transform: scale(1.05);
}
</style>